<template>
  <div class="app-container">

<div>
    <el-table v-loading="loading" :data="couponList">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="编号" align="center" prop="id" />
      <el-table-column label="优惠券图片" prop="couponImg" width="180">
        <template  #default="scope">
          <el-image :src="scope.row.couponImg" alt="图片损坏" width="50px" height="50px"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="优惠券名称" align="center" prop="couponName" />
      <el-table-column label="优惠券金额" align="center" prop="amount" />
      <el-table-column label="使用门槛" align="center" prop="minPoint" />
      <el-table-column label="使用时间" align="center" prop="startTime" />
      <el-table-column label="结束时间" align="center" prop="endTime" />
      <el-table-column label="优惠码" align="center" prop="code" />
      <el-table-column label="限领取张数" align="center" prop="perLimit" />
      <el-table-column label="优惠券使用类型" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span v-if="scope.row.useType == 0" style="margin-left: 10px">全场通用</span>
            <span v-if="scope.row.useType == 1" style="margin-left: 10px">指定分类</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="insertDrawDown(scope.row)">领取优惠券</el-button>
        </template>
      </el-table-column>
    </el-table>
</div>

    <!-- 添加或修改品牌对话框 -->
    <el-dialog :title="title" v-model="open" width="800px" append-to-body>
      <el-form ref="skuFullRef" :model="form" :rules="rules" label-width="150px">

        <el-form-item label="编号" prop="id">
          <el-input v-model="form.id" readonly/>
        </el-form-item>

        <el-form-item label="优惠券名称" prop="couponName">
          <el-input v-model="form.couponName" readonly />
        </el-form-item>

        <el-form-item label="优惠码" prop="code">
          <el-input v-model="form.code" readonly />
        </el-form-item>

        <el-form-item label="限领取张数" prop="perLimit">
          <el-input v-model="form.perLimit" readonly/>
        </el-form-item>

        <el-form-item label="使用门槛" prop="minPoint">
          <el-input v-model="form.minPoint" readonly/>
        </el-form-item>

        <el-form-item label="减免金额" prop="amount">
          <el-input v-model="form.amount" readonly />
        </el-form-item>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确认领取</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>


  </div>
</template>

<script setup name="coupon">


import {getCoupon, getSelectCoupon} from "../../../api/coupon/coupon.js";
import {couponDrawDown} from "../../../api/coupon/couponHistory.js";

const { proxy } = getCurrentInstance();

const couponList = ref([]);
const loading = ref(true);
const ids = ref([]);
const total = ref(0);
const title = ref("");
const open = ref(false);


const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 3,
  },
  rules: {
  },
});
const { queryParams, form ,rules} = toRefs(data);

/** 查询优惠券列表 */
function getList() {
  loading.value = true;
  getSelectCoupon(form.value).then(response => {
    console.log(response)
    couponList.value = response.data;
    total.value = response.data.total;
    loading.value = false;
  });
}


function cancel() {
  open.value = false;
  reset();
}


// 表单重置
function reset() {
  form.value = {
    id : null,
    couponImg : null,
    couponName : null,
    amount : null,
    minPoint : null,
    startTime : null,
    endTime : null,
    code : null,
    useType : null,
    perLimit : null,
    enableStartTime : null,
    enableEndTime : null
  };
  proxy.resetForm("couponUserRef");
}

function insertDrawDown(row) {
  reset();
  const couponId = row.id || ids.value
  getCoupon(couponId).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "领取优惠券";
  });
}


function submitForm() {
  couponDrawDown(form.value).then(response => {
    proxy.$modal.msgSuccess("领取成功");
    open.value = false;
    getList();
  });
}

getList();
</script>
